<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>系统设置 - 后台管理系统</title>
    <style th:fragment="style">
        .settings-card {
            border-radius: 8px;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        .settings-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        }
        .settings-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        .settings-card-header h5 {
            margin-bottom: 0;
            font-size: 1rem;
            font-weight: 600;
        }
        .settings-card-body {
            padding: 1.5rem;
        }
        .setting-item {
            margin-bottom: 1.5rem;
        }
        .setting-item:last-child {
            margin-bottom: 0;
        }
        .setting-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        .setting-desc {
            font-size: 0.875rem;
            color: #6c757d;
            margin-bottom: 0.5rem;
        }
        .content-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1.5rem;
        }
        .nav-settings {
            border-radius: 8px;
            overflow: hidden;
        }
        .nav-settings .nav-link {
            border-radius: 0;
            padding: 0.75rem 1.25rem;
            color: #495057;
        }
        .nav-settings .nav-link.active {
            background-color: #0d6efd;
            color: #fff;
        }
        .nav-settings .nav-link i {
            margin-right: 0.5rem;
            width: 20px;
            text-align: center;
        }
        .tab-content {
            min-height: 300px;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <div class="content-wrapper">
            <!-- 页面标题 -->
            <div class="bg-light p-3 mb-4 settings-card">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                    <h2 class="mb-3 mb-md-0 fs-4">系统设置</h2>
                </div>
            </div>

            <div class="row">
                <!-- 设置导航 -->
                <div class="col-md-3 mb-4">
                    <div class="list-group nav-settings" id="settings-tabs" role="tablist">
                        <a class="list-group-item list-group-item-action active" id="basic-tab" data-bs-toggle="pill" href="#basic-settings" role="tab" aria-controls="basic-settings" aria-selected="true">
                            <i class="bi bi-gear"></i> 基本设置
                        </a>
                        <a class="list-group-item list-group-item-action" id="security-tab" data-bs-toggle="pill" href="#security-settings" role="tab" aria-controls="security-settings" aria-selected="false">
                            <i class="bi bi-shield-lock"></i> 安全设置
                        </a>
                        <a class="list-group-item list-group-item-action" id="email-tab" data-bs-toggle="pill" href="#email-settings" role="tab" aria-controls="email-settings" aria-selected="false">
                            <i class="bi bi-envelope"></i> 邮件设置
                        </a>
                        <a class="list-group-item list-group-item-action" id="cache-tab" data-bs-toggle="pill" href="#cache-settings" role="tab" aria-controls="cache-settings" aria-selected="false">
                            <i class="bi bi-cpu"></i> 缓存管理
                        </a>
                    </div>
                </div>
                
                <!-- 设置内容 -->
                <div class="col-md-9">
                    <div class="tab-content" id="settings-tabContent">
                        <!-- 基本设置 -->
                        <div class="tab-pane fade show active" id="basic-settings" role="tabpanel" aria-labelledby="basic-tab">
                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h5><i class="bi bi-gear text-primary me-2"></i>基本设置</h5>
                                </div>
                                <div class="settings-card-body">
                                    <form id="basicSettingsForm">
                                        <div class="setting-item">
                                            <label for="site_name" class="setting-label">网站名称</label>
                                            <div class="setting-desc">显示在浏览器标题和页面顶部的网站名称</div>
                                            <input type="text" class="form-control" id="site_name" name="site_name" th:value="${settings.basic != null && settings.basic.site_name != null ? settings.basic.site_name.value : '优选商城'}">
                                        </div>
                                        <div class="setting-item">
                                            <label for="site_logo" class="setting-label">网站Logo</label>
                                            <div class="setting-desc">网站Logo的URL地址</div>
                                            <input type="text" class="form-control" id="site_logo" name="site_logo" th:value="${settings.basic != null && settings.basic.site_logo != null ? settings.basic.site_logo.value : '/static/images/logo.png'}">
                                        </div>
                                        <div class="setting-item">
                                            <label for="site_description" class="setting-label">网站描述</label>
                                            <div class="setting-desc">用于SEO的网站描述</div>
                                            <textarea class="form-control" id="site_description" name="site_description" rows="3" th:text="${settings.basic != null && settings.basic.site_description != null ? settings.basic.site_description.value : '优质商品，优选生活'}"></textarea>
                                        </div>
                                        <div class="setting-item">
                                            <label for="contact_email" class="setting-label">联系邮箱</label>
                                            <div class="setting-desc">用于接收系统通知和用户反馈的邮箱</div>
                                            <input type="email" class="form-control" id="contact_email" name="contact_email" th:value="${settings.basic != null && settings.basic.contact_email != null ? settings.basic.contact_email.value : 'support@example.com'}">
                                        </div>
                                        <div class="setting-item">
                                            <label for="contact_phone" class="setting-label">联系电话</label>
                                            <div class="setting-desc">显示在网站上的联系电话</div>
                                            <input type="text" class="form-control" id="contact_phone" name="contact_phone" th:value="${settings.basic != null && settings.basic.contact_phone != null ? settings.basic.contact_phone.value : '400-123-4567'}">
                                        </div>
                                        <div class="mt-4">
                                            <button type="submit" class="btn btn-primary">保存设置</button>
                                            <button type="reset" class="btn btn-secondary ms-2">重置</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 安全设置 -->
                        <div class="tab-pane fade" id="security-settings" role="tabpanel" aria-labelledby="security-tab">
                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h5><i class="bi bi-shield-lock text-success me-2"></i>安全设置</h5>
                                </div>
                                <div class="settings-card-body">
                                    <form id="securitySettingsForm">
                                        <div class="setting-item">
                                            <label for="password_min_length" class="setting-label">密码最小长度</label>
                                            <div class="setting-desc">用户密码的最小长度要求</div>
                                            <input type="number" class="form-control" id="password_min_length" name="password_min_length" min="6" max="20" th:value="${settings.security != null && settings.security.password_min_length != null ? settings.security.password_min_length.value : '6'}">
                                        </div>
                                        <div class="setting-item">
                                            <label for="login_attempts" class="setting-label">允许登录失败次数</label>
                                            <div class="setting-desc">用户连续登录失败的最大次数，超过将被锁定</div>
                                            <input type="number" class="form-control" id="login_attempts" name="login_attempts" min="1" max="10" th:value="${settings.security != null && settings.security.login_attempts != null ? settings.security.login_attempts.value : '5'}">
                                        </div>
                                        <div class="mt-4">
                                            <button type="submit" class="btn btn-primary">保存设置</button>
                                            <button type="reset" class="btn btn-secondary ms-2">重置</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 邮件设置 -->
                        <div class="tab-pane fade" id="email-settings" role="tabpanel" aria-labelledby="email-tab">
                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h5><i class="bi bi-envelope text-warning me-2"></i>邮件设置</h5>
                                </div>
                                <div class="settings-card-body">
                                    <form id="emailSettingsForm">
                                        <div class="setting-item">
                                            <label for="smtp_host" class="setting-label">SMTP服务器</label>
                                            <div class="setting-desc">邮件发送服务器地址</div>
                                            <input type="text" class="form-control" id="smtp_host" name="smtp_host" th:value="${settings.email != null && settings.email.smtp_host != null ? settings.email.smtp_host.value : 'smtp.example.com'}">
                                        </div>
                                        <div class="setting-item">
                                            <label for="smtp_port" class="setting-label">SMTP端口</label>
                                            <div class="setting-desc">SMTP服务器端口，通常为25或465(SSL)</div>
                                            <input type="number" class="form-control" id="smtp_port" name="smtp_port" th:value="${settings.email != null && settings.email.smtp_port != null ? settings.email.smtp_port.value : '25'}">
                                        </div>
                                        <div class="setting-item">
                                            <label for="smtp_username" class="setting-label">SMTP用户名</label>
                                            <div class="setting-desc">SMTP服务器登录用户名</div>
                                            <input type="text" class="form-control" id="smtp_username" name="smtp_username" th:value="${settings.email != null && settings.email.smtp_username != null ? settings.email.smtp_username.value : 'admin@example.com'}">
                                        </div>
                                        <div class="setting-item">
                                            <label for="smtp_password" class="setting-label">SMTP密码</label>
                                            <div class="setting-desc">SMTP服务器登录密码</div>
                                            <input type="password" class="form-control" id="smtp_password" name="smtp_password" th:value="${settings.email != null && settings.email.smtp_password != null ? settings.email.smtp_password.value : ''}">
                                        </div>
                                        <div class="mt-4">
                                            <button type="submit" class="btn btn-primary">保存设置</button>
                                            <button type="reset" class="btn btn-secondary ms-2">重置</button>
                                            <button type="button" id="testEmailBtn" class="btn btn-info ms-2">测试邮件发送</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 缓存管理 -->
                        <div class="tab-pane fade" id="cache-settings" role="tabpanel" aria-labelledby="cache-tab">
                            <div class="settings-card">
                                <div class="settings-card-header">
                                    <h5><i class="bi bi-cpu text-danger me-2"></i>缓存管理</h5>
                                </div>
                                <div class="settings-card-body">
                                    <div class="alert alert-info">
                                        <i class="bi bi-info-circle-fill me-2"></i> 清除缓存可能会导致系统短暂变慢，请在访问量较少时操作。
                                    </div>
                                    <div class="d-grid gap-2 col-md-6 mx-auto mt-4">
                                        <button id="clearCacheBtn" class="btn btn-danger btn-lg">
                                            <i class="bi bi-trash me-2"></i> 清除系统缓存
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:fragment="script">
        // 初始化设置页面
        document.addEventListener('DOMContentLoaded', function() {
            // 基本设置表单提交
            document.getElementById('basicSettingsForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(this);
                const settings = {};
                
                for (const [key, value] of formData.entries()) {
                    settings[key] = value;
                }
                
                saveSettings('/admin/settings/basic', settings);
            });
            
            // 安全设置表单提交
            document.getElementById('securitySettingsForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(this);
                const settings = {};
                
                for (const [key, value] of formData.entries()) {
                    settings[key] = value;
                }
                
                saveSettings('/admin/settings/security', settings);
            });
            
            // 邮件设置表单提交
            document.getElementById('emailSettingsForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(this);
                const settings = {};
                
                for (const [key, value] of formData.entries()) {
                    settings[key] = value;
                }
                
                saveSettings('/admin/settings/email', settings);
            });
            
            // 测试邮件发送
            document.getElementById('testEmailBtn').addEventListener('click', function() {
                // 这里应该添加测试邮件发送的逻辑
                alert('暂未实现邮件发送测试功能');
            });
            
            // 清除缓存
            document.getElementById('clearCacheBtn').addEventListener('click', function() {
                if (confirm('确定要清除系统缓存吗？')) {
                    $.ajax({
                        url: '/admin/settings/clear-cache',
                        type: 'POST',
                        success: function(res) {
                            if (res.code === 0) {
                                showToast('缓存已成功清除', 'success');
                            } else {
                                showToast('清除缓存失败: ' + res.msg, 'error');
                            }
                        },
                        error: function(xhr, status, error) {
                            showToast('请求失败: ' + error, 'error');
                        }
                    });
                }
            });
        });
        
        // 保存设置
        function saveSettings(url, settings) {
            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(settings),
                success: function(res) {
                    if (res.code === 0) {
                        showToast('设置已成功保存', 'success');
                    } else {
                        showToast('保存设置失败: ' + res.msg, 'error');
                    }
                },
                error: function(xhr, status, error) {
                    showToast('请求失败: ' + error, 'error');
                }
            });
        }
        
        // 显示提示
        function showToast(message, type) {
            // 创建toast容器
            if (!document.querySelector('.toast-container')) {
                const toastContainer = document.createElement('div');
                toastContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
                document.body.appendChild(toastContainer);
            }
            
            const toastContainer = document.querySelector('.toast-container');
            
            // 创建toast元素
            const toastEl = document.createElement('div');
            toastEl.className = `toast align-items-center text-white bg-${type === 'success' ? 'success' : 'danger'} border-0`;
            toastEl.setAttribute('role', 'alert');
            toastEl.setAttribute('aria-live', 'assertive');
            toastEl.setAttribute('aria-atomic', 'true');
            
            toastEl.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            `;
            
            toastContainer.appendChild(toastEl);
            
            // 初始化并显示toast
            const toast = new bootstrap.Toast(toastEl, {
                autohide: true,
                delay: 3000
            });
            
            toast.show();
            
            // 关闭后移除元素
            toastEl.addEventListener('hidden.bs.toast', function() {
                toastEl.remove();
            });
        }
    </script>
</body>
</html> 